<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<!-- eslint-disable no-dupe-keys -->
<!-- eslint-disable vue/no-deprecated-destroyed-lifecycle -->
<template>
  <div class="header-container">
    <div class="left">
      <div class="collapse-btn" @click="toggleSidebar">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </div>
      <div class="system-title">商品防伪网站</div>
    </div>
    <div class="right">
<!--      <div class="header-actions">-->
<!--        <el-tooltip content="全屏切换" placement="bottom">-->
<!--          <div class="action-item" @click="handleFullScreen">-->
<!--            <i :class="isFullScreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>-->
<!--          </div>-->
<!--        </el-tooltip>-->
<!--        <el-tooltip content="消息通知" placement="bottom">-->
<!--          <div class="action-item">-->
<!--            <el-badge :value="3" class="notice-badge">-->
<!--              <i class="el-icon-bell"></i>-->
<!--            </el-badge>-->
<!--          </div>-->
<!--        </el-tooltip>-->
<!--      </div>-->
      <!-- 用户信息和退出登录区域 -->
      <div class="user-wrapper">
        <div class="user-info-container">
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="user-info">
              <img :src="userAvatar" class="user-avatar">
              <span class="user-name">{{ userName }}</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">
                <i class="el-icon-user"></i> 个人信息
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <i class="el-icon-setting"></i> 系统设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <i class="el-icon-switch-button"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 退出登录按钮 -->
        <button class="logout-button" @click="logout">退出登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonHeader',
  data() {
    return {
      isCollapse: false,
      isFullScreen: false,
      userName: '系统管理员',
      userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  },
  methods: {
    // 切换侧边栏
    toggleSidebar() {
      this.isCollapse = !this.isCollapse
      // 触发事件，通知父组件或vuex状态管理
      this.$emit('toggle-sidebar', this.isCollapse)
    },
    // 全屏切换
    handleFullScreen() {
      if (!this.isFullScreen) {
        // 进入全屏
        const element = document.documentElement
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
      this.isFullScreen = !this.isFullScreen
    },
    // 处理下拉菜单命令
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$message.info('查看个人信息')
          break
        case 'settings':
          this.$message.info('系统设置')
          break
        case 'logout':
          this.logout()
          break
      }
    },
    // 退出登录
    logout() {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实际项目中应该调用退出接口
        this.$message.success('退出成功')
        // 清除本地存储的用户信息
        localStorage.removeItem('token')
        // 跳转到登录页
        this.$router.push('/login')
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    },
    // 全屏状态变化处理
    onFullScreenChange() {
      this.isFullScreen = document.fullscreenElement || 
                          document.webkitFullscreenElement || 
                          document.mozFullScreenElement || 
                          document.msFullscreenElement
    }
  },
  mounted() {
    // 添加全屏变化事件监听
    document.addEventListener('fullscreenchange', this.onFullScreenChange)
    document.addEventListener('webkitfullscreenchange', this.onFullScreenChange)
    document.addEventListener('mozfullscreenchange', this.onFullScreenChange)
    document.addEventListener('MSFullscreenChange', this.onFullScreenChange)
  },
  beforeUnmount() {
    // 移除事件监听
    document.removeEventListener('fullscreenchange', this.onFullScreenChange)
    document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange)
    document.removeEventListener('mozfullscreenchange', this.onFullScreenChange)
    document.removeEventListener('MSFullscreenChange', this.onFullScreenChange)
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}

.left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
  color: #606266;
}

.system-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.right {
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  margin-right: 20px;
}

.action-item {
  padding: 0 10px;
  font-size: 20px;
  color: #606266;
  cursor: pointer;
}

.action-item:hover {
  color: #409EFF;
}

.notice-badge {
  line-height: 1;
}

/* 用户信息和退出登录的容器 */
.user-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info-container {
  margin-bottom: 5px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-size: 14px;
  color: #303133;
  margin-right: 5px;
}

/* 退出登录按钮样式 */
.logout-button {
  position: absolute;
  top: 100%;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
}

.logout-button:hover {
  background-color: #333;
}
</style> 